<template>
	<div class="TMB-warp">
		<div class="titler border-bottom">
			<span class="font-w fs16">{{ $t("message.plan.Hand.title") }}</span>
			<i class="el-icon-close" @click="CloseTables"></i>
		</div>
		<div class="middle-box">
			<div class="left-box border-right">
				<div class="row font-w border-bottom fs16">
					{{ $t("message.plan.Hand.label_1") }}
				</div>
				<div class="row">
					<span class=" font-w mar8">{{ $t("message.plan.Hand.label_2") }}</span>
					<span class="gray">
						{{ $store.state.plantName }}
					</span>
				</div>
				<div class="row">
					<span class=" font-w mar8">{{ $t("message.plan.Hand.label_4") }}</span>
					<span class="mar8 gray">{{ $store.state.macType == 1 ? $t("message.plan.TBM.label_5") : '配管'
						}}</span><el-input class="mar8" readonly v-model="macNum"></el-input>
					<span>{{ $t("message.plan.TBM.label_6") }}</span>
				</div>
			</div>
			<div class="right-box">
				<div class="row font-w border-bottom fs16">
					{{ $t("message.plan.Hand.label_7") }}
				</div>

				<div class="row">
					<span style="margin-right:15px;">実施時期</span>
					<el-date-picker v-model="time" type="month" class="ipt orange" placeholder=" " :clearable="false"
						:format="timeFormat" :value-format="timeFormat" @change="dateChange"
						:picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div class="row">
					<span style="margin-right:15px;">実施理由</span>
				</div>
				<div class="row">
					<el-input class="longIpt" v-model="Reson" @input="Reson = $setMaxLength(Reson, 50)"></el-input>
				</div>
			</div>
		</div>
		<div class="footer border-top">
			<span class="font-w">{{ $t("message.plan.Hand.label_9") }}</span>
			<div>
				<el-button @click="CloseTables">Cancel</el-button>
				<el-button type="primary" @click="ThckDeterManualPlanApi">OK</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import BASE from '@/utils/base'
import {
	ThckDeterManualPlanCond, ThckDeterManualPlan
} from '@/api/api'
import eventBus from "@/eventBus/bus";
import { getLocalStorage } from "@/utils/storage";
import { showLoading, hideLoading } from "@/utils/loading";
export default {
	name: "HANPlan",
	props: {
		selectData: {
			type: Array
		},
	},
	data() {
		return {
			test: false,
			time: "2022-02",
			timeFormat: "yyyy-MM",
			macNum: 0,
			Reson: '',
			pickerOptions: {
				disabledDate(time) {
					// console.log('time.getTime()', time.getTime());
					return time.getTime() < new Date().getTime();
				}
			},
		};
	},
	components: {},
	watch: {},
	methods: {
		//执行新增
		async ThckDeterManualPlanApi() {
			showLoading();
			let PlanList = [];
			for (let i = 0; i < this.selectData.length; i++) {
				let temp = {
					DmgCode: Number(this.selectData[i].DMG_CODE),
					PosNo: Number(this.selectData[i].POS_NO),
				}
				PlanList.push(temp)
			}
			let dataJson = {
				PltCode: this.$store.state.pltCode,
				Period: this.time,
				Reson: this.Reson,
				PlanList

			};
			console.log(dataJson);
			let res = await ThckDeterManualPlan(dataJson);
			if (res.data.code == -311) {
				window.open(res.data.data)
				hideLoading();
				return
			}
			if (res.data.code != 0) {
				this.$alert(res.data.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});

				hideLoading();
				return
			}
			hideLoading();
			this.$message({
				type: 'success',
				message: res.data.msg
			})
			this.$emit('CloseTables');
			this.$emit("reGetMTTableInfo");
		},
		CloseTables() {
			this.$emit('CloseTables')
		},
		dateChange(val) {
			console.log(`dateChange(${this.dateValue})`, val);
			//     this.getResOfferEjectDataApi();
		},
		async initFn() {
			let D = {
				PltCode: this.$store.state.pltCode
			};
			let R = await ThckDeterManualPlanCond(D);
			this.timeFormat = R.data.data.format;
			this.time = R.data.data.period;
		}
	},
	created() { },
	mounted() {
		this.macNum = this.selectData.length;
		this.initFn();
		if (BASE.IP == "http://192.168.33.200:8085") {
			this.timeFormat = "yyyy-MM";
		} else if (BASE.IP == "https://eng-dev-api.a-mis.com") {
			this.timeFormat = "MM-yyyy";
		} else if (BASE.IP == "https://demoapi.richtechcn.com") {
			this.timeFormat = "yyyy-MM";
		}
	},
	beforeDestroy() { },
	destroyed() { }
};
</script>
<style lang="scss" scoped>
.TMB-warp {
	width: 800px;
	height: 340px;
	background: rgb(255, 255, 255);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
		0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);
	z-index: 100;
}

.titler {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 24px;

	i {
		cursor: pointer;
	}
}

.middle-box {
	height: calc(100% - 100px);
	display: flex;

	.left-box {
		width: 281px;
		padding: 0 24px;
	}

	.right-box {
		width: calc(100% - 281px);
		padding: 0 24px;
	}

	.row {
		padding: 10px 0;
		display: flex;
		align-items: center;

		.el-input {
			width: 70px;
			height: 32px;

			::v-deep .el-input__inner {
				width: 70px;
				height: 100%;
				text-align: center;
			}
		}

		::v-deep .el-radio__label {
			font-weight: bold;

		}

		.ipt {
			width: 120px !important;
			height: 32px;
			margin-right: 8px;

			::v-deep .el-input__inner {
				width: 100%;
				height: 32px;
				padding: 0 8px 0 10px;
			}

			// ::v-deep .el-input__inner:focus {
			//   border: 1px solid #dcdfe6;
			// }
			::v-deep .el-input__icon {
				line-height: 32px;
				color: #909399;
			}

			::v-deep .el-input__suffix {
				display: none;
			}
		}

		.longIpt {
			width: 391px !important;
			height: 32px;
			margin-right: 8px;
			text-align: left !important;


			::v-deep .el-input__inner {
				width: 100%;
				height: 100%;
				text-align: left;
			}

		}
	}
}

.footer {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 24px;

	button {
		width: 82px !important;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		// cursor: pointer;
		line-height: 0;
	}

	button:nth-child(2) {
		margin-left: 16px;
		// color: #ffffff;
		// background: #106ebe;
	}
}

.font-w {
	font-weight: bold;
}

.border-top {
	border-top: 1px solid #f0f0f0;
}

.border-bottom {
	border-bottom: 1px solid #f0f0f0;
}

.border-left {
	border-left: 1px solid #f0f0f0;
}

.border-right {
	border-right: 1px solid #f0f0f0;
}

.gray {
	color: #7B7B7B;
}

.mar8 {
	margin-right: 8px;
}

.fs16 {
	font-size: 16px;
}

.orange {
	::v-deep .el-input__inner {
		background-color: #FFDEACFF;
	}
}
</style>
